<template>
	<div class="base-container">
		<div class="page-header">
			<h2>客户需求管理</h2>
		</div>

		<!-- 搜索筛选区域 -->
		<div class="search-container">
			<el-form :inline="true" :model="searchForm" class="search-form">
				<el-form-item label="需求编号">
					<el-input
						style="width: 200px"
						v-model="searchForm.demandCode"
						placeholder="请输入需求编号"
						clearable
					></el-input>
				</el-form-item>

				<el-form-item label="需求标题">
					<el-input
						style="width: 200px"
						v-model="searchForm.title"
						placeholder="请输入需求标题"
						clearable
					></el-input>
				</el-form-item>

				<el-form-item label="紧急程度">
					<el-select
						style="width: 150px"
						v-model="searchForm.urgencyLevel"
						placeholder="请选择紧急程度"
						clearable
					>
						<el-option
							v-for="option in urgencyOptions"
							:key="option.value"
							:label="option.label"
							:value="option.value"
						>{{ option.label }}</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="需求类型">
					<el-select
						style="width: 150px"
						v-model="searchForm.demandType"
						placeholder="请选择需求类型"
						clearable
					>
						<el-option
							v-for="option in demandTypeOptions"
							:key="option.value"
							:label="option.label"
							:value="option.value"
						>{{ option.label }}</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="需求状态">
					<el-select
						style="width: 150px"
						v-model="searchForm.demandStatus"
						placeholder="请选择需求状态"
						clearable
					>
						<el-option
							v-for="option in demandStatusOptions"
							:key="option.value"
							:label="option.label"
							:value="option.value"
						>{{ option.label }}</el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="handleSearch">搜索</el-button>
					<el-button @click="handleReset">重置</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 数据操作区域 -->
		<div class="action-container">
			<el-button v-if="!isCollecting" type="success" @click="startCollecting()" :loading="isCollecting">
				开始收集
			</el-button>
			<el-button v-else type="danger" @click="stopCollecting()">
				<span class="el-icon-loading" v-if="isCollecting"></span>
				停止收集
			</el-button>
		</div>

		<!-- 列表展示区域 -->
		<div class="table-container">
			<el-table v-loading="loading" :data="customerDemandList" style="width: 100%">
				<el-table-column prop="id" label="ID" width="80"></el-table-column>
				<el-table-column
					prop="demandCode"
					label="需求编号"
					width="180"
				></el-table-column>
				<el-table-column prop="customerName" label="客户名称" width="150"></el-table-column>
				<el-table-column prop="zoneName" label="供电区域" width="150"></el-table-column>
				<el-table-column prop="demandType" label="需求类型" width="100">
					<template #default="{ row }">
						<el-tag :type="row.demandType === 0 ? 'primary' : row.demandType === 1 ? 'warning' : 'info'">
							{{ formatType(row.demandType) }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="需求标题" min-width="300">
					<template #default="{ row }">
						<div style="font-weight: 500;">
							{{ row.title }}
							<span v-if="row.requiredPower !== null && row.requiredPower !== undefined" style="margin-left: 8px; color: #1890ff;">
								({{ Number(row.requiredPower).toFixed(2) }}kW)
							</span>
						</div>
						<div v-if="row.description" style="color: #606266; font-size: 12px; margin-top: 4px; line-height: 1.4;">
							{{ row.description }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="urgencyLevel" label="紧急程度" width="100">
					<template #default="{ row }">
						{{ formatUrgency(row.urgencyLevel) }}
					</template>
				</el-table-column>
				<el-table-column prop="demandStatus" label="状态" width="100">
					<template #default="{ row }">
						<el-tag :type="row.demandStatus === 0 ? 'warning' : 'success'">
							{{ formatStatus(row.demandStatus) }}
						</el-tag>
					</template>
				</el-table-column>

				<el-table-column min-width="150" label="操作" fixed="right" >
					<template #default="{ row }">
				<el-button size="small" @click="handleView(row)">查看</el-button>
				<el-button v-if="row.demandStatus === 0" size="small" type="primary" @click="handleResponse(row)">
					处理</el-button>
				<el-button size="small" type="danger" @click="handleDelete(row.id)">
					删除</el-button>
				</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页组件 -->
		<div class="pagination-container">
			<el-pagination
				v-model:current-page="pagination.currentPage"
				v-model:page-size="pagination.pageSize"
				:page-sizes="[2, 10, 20, 50, 100]"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			></el-pagination>
		</div>

		<!-- 查看详情对话框 -->
		<el-dialog
			v-model="viewDialogVisible"
			title="查看需求详情"
			width="600px"
			:close-on-click-modal="false"
		>
			<el-descriptions :column="1" border>
				<el-descriptions-item label="ID">
					{{ viewForm.id }}
				</el-descriptions-item>
				<el-descriptions-item label="需求编号">
					{{ viewForm.demandCode }}
				</el-descriptions-item>
				<el-descriptions-item label="客户名称">
					{{ viewForm.customerName }}
				</el-descriptions-item>
				<el-descriptions-item label="供电区域">
					{{ viewForm.zoneName }}
				</el-descriptions-item>
				<el-descriptions-item label="设备名称">
					{{ viewForm.equipmentName }}
				</el-descriptions-item>
				<el-descriptions-item label="需求类型">
					<el-tag :type="viewForm.demandType === 0 ? 'primary' : viewForm.demandType === 1 ? 'warning' : 'info'">
						{{ formatType(viewForm.demandType) }}
					</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="需求标题">
					{{ viewForm.title }}
				</el-descriptions-item>
				<el-descriptions-item label="需求描述">
					{{ viewForm.description }}
				</el-descriptions-item>
				<el-descriptions-item label="所需功率">
					{{ viewForm.requiredPower }}
				</el-descriptions-item>
				<el-descriptions-item label="紧急程度">
					{{ formatUrgency(viewForm.urgencyLevel) }}
				</el-descriptions-item>
				<el-descriptions-item label="需求状态">
					<el-tag :type="viewForm.demandStatus === 0 ? 'warning' : 'success'">
						{{ formatStatus(viewForm.demandStatus) }}
					</el-tag>
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>

		<!-- 编辑对话框 -->
		<el-dialog
			v-model="editDialogVisible"
			title="响应处理"
			width="600px"
			:close-on-click-modal="false"
		>
			<el-form :model="editForm" label-width="120px">
				<el-form-item label="需求处理方式" prop="processingMethod" required>
					<el-input
						v-model="editForm.processingMethod"
						placeholder="请输入需求处理方式"
						type="textarea"
						rows="3"
					></el-input>
				</el-form-item>

				<el-form-item label="需求状态" prop="demandStatus" required>
					<el-radio-group v-model="editForm.demandStatus">
						<el-radio :label="0">待处理</el-radio>
						<el-radio :label="1">已完成</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>

			<template #footer>
				<el-button @click="editDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveResponse" :loading="editLoading">
					处理
				</el-button>
			</template>
		</el-dialog>


	</div>
</template>
<script setup>
import { onMounted } from "vue";

import { useCustomerDemand } from "../hooks/useCustomerDemand";
const {
	loading,
	// 客户需求列表
	customerDemandList,
	LoadingCustomerDemandList,
	// 查看需求详情
	viewDialogVisible,
	viewForm,
	handleView,
	// 删除需求
	handleDelete,
	// 编辑需求
	editDialogVisible,
	editForm,
	saveResponse,
	handleResponse,
	// 选项数据
	urgencyOptions,
	demandStatusOptions,
	demandTypeOptions,
	editLoading,
	// 搜索表单
	searchForm,
	// 搜索
	handleSearch,
	// 重置搜索
	handleReset,

	// 分页信息
	pagination,
	// 分页切换
	handleCurrentChange,
	handleSizeChange,

	// 格式化方法
	formatType,
	formatStatus,
	formatUrgency,
	// 定时收集功能
	isCollecting,
	startCollecting,
	stopCollecting,
} = useCustomerDemand();
onMounted(() => {
	LoadingCustomerDemandList();
});
</script>

<style scoped>
.base-container {
	padding: 20px;
	background-color: #fff;
	min-height: calc(100vh - 40px);
}

.page-header {
	margin-bottom: 20px;
}

.page-header h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	color: #303133;
}

.search-container {
	background-color: #f5f7fa;
	padding: 16px;
	margin-bottom: 20px;
	border-radius: 4px;
}

.search-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.action-container {
	margin-bottom: 20px;
	display: flex;
	justify-content: flex-end;
}

.table-container {
	margin-bottom: 20px;
}

.pagination-container {
	display: flex;
	justify-content: flex-end;
}

/* 响应式调整 */
@media (max-width: 768px) {
	.base-container {
		padding: 10px;
	}

	.search-form {
		flex-direction: column;
		align-items: stretch;
	}

	.search-form .el-form-item {
		margin-right: 0;
	}

	.el-table {
		font-size: 12px;
	}

	.el-table-column--selection {
		width: 40px !important;
	}

	.el-table .el-button {
		padding: 4px 8px;
		font-size: 12px;
	}
}
</style>
